<template>
  <div>
      <div class="bargin">
            <div class="left">
                <img :src="bargin.pic">
            </div>
            <div class="right">
                <p>{{bargin.name}}</p>
                <p class="p2">{{bargin.characteristic}}</p>
                <p class="price">
                    <span class="minPrice">￥{{bargin.minPrice}}</span>
                    <span>￥{{bargin.originalPrice}}</span>
                    <span>{{bargin.stores}}件</span>
                </p>
                <p class="p1">
                    <span>低价</span>
                    <span>原价</span>
                    <span>限量</span> 
                </p>
            </div>
      </div>
  </div>
</template>

<script>
import { getBarGin } from "../../utils/api/home";
export default {
  name: "",
  data() {
    return {
      bargin: [],
    };
  },
  created() {},
  mounted() {
    getBarGin().then((res) => {
      this.bargin = res.data[9]
    });
  },
  methods: {},
};
</script>

<style lang='scss' scoped>
.bargin{
    width: 100%;
    height: 2.6rem;
    display: flex;
    background-color: #fff;
 
    .left{
        width: 35%;
        img{
            width: 100%;
            height: 86%;
            border-radius: 4px;
            margin: .2rem 0 0 .2rem;
        }
    }
    .right{
        font-size: .3rem;
        .p2{
            margin-bottom: .4rem;
        }
        p{
            padding: .2rem 0 0 .4rem;
           
            .minPrice{
                color: red;
                font-weight: 700;
            }
        }
        .price,.p1{
        width: 100%;
        display: flex;
        text-align: center;
        padding: .2rem 0 0 0;
        span{
            flex: 1;
        }
        }
        
    }
}
</style>